When to use css background or html img tag

There are two ways to set a image in css,

1. background in <div> tag
2. <img> tag

css background

• it's a shorthand, contains:
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
• mostly used

  1background-size: contain;
  2width: 100%;
  3height: 100%;
  4background-position: center;
  5background-repeat: no-repeat;
  6background-image: url("../../images/readmore.png");
  7
  

html <img>

• attributes: (common)
  • alt: display this string when image broken / for SEO
  • src: the source of the image (url)
  • width: px
  • height: px

When to use

• <img>: When the image is an important data for your content.
• background: When the image is a decoration in your UI.

Sources

• https://developer.mozilla.org/en-US/docs/Web/CSS/background
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img